<template>
    <el-dialog title="接收人明细" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="4vh" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="listVue">
                <div class="thVue flex">   
                    <div class="li" style="width: 80px; line-height: 40px; text-align: center;">
                        <img src="../../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="isCurrentPage"  @click="cancelCurrentPage">
                        <img src="../../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectCurrentPage">
                        <span style="font-weight: 600; padding-left: 5px;">当前页</span>
                    </div>    
                    <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">微信名</div>
                    <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">备注名</div>
                    <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">标签</div>  
                    <!-- <div class="li" style="width: 180px; line-height: 40px; text-align: center; font-weight: 600;">分组</div>  -->
                    <div class="li" style="width: 100px; line-height: 40px; text-align: center; font-weight: 600;">聊天类型</div>      
                </div>
                <div class="tdContent">
                    <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                        <div class="li" style="width: 80px; line-height: 50px; padding-left: 7px;">
                            <img src="../../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="JSON.stringify($store.state.selectList).includes(JSON.stringify(item))" @click="removeFun(item)">
                            <img src="../../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectFun(item)">
                        </div>
                        <div class="li line-1" style="width: 200px; line-height: 50px; text-align: center; padding: 0 10px;">{{item.type===1 ? item.groupName : item.friendWechatName}}</div>
                        <div class="li" style="width: 200px; line-height: 50px; text-align: center; padding: 0 10px;">{{item.type===0 ? item.friendWechatName : ""}}</div>
                        <div class="li flex_center align_center flex_1" style="overflow: hidden; padding: 0 10px;">
                            <template v-if="item.tag">
                                <el-tag type="info" size="mini" v-for="(ver, i) in item.tag.split(',')" :key="i">{{ ver }}</el-tag>
                            </template> 
                        </div>
                        <!-- <div class="li" style="width: 180px; line-height: 50px; text-align: center;">{{ item.categoryName }}</div>   -->
                        <div class="li" style="width: 100px; line-height: 50px; text-align: center;">{{ ["私聊", "群聊"][item.type] }}</div>  
                    </div>
                </div>
                <!-- 底部 -->
                <div class="botVue flex_between align_center">
                    <div class="paginationVue flex_center align_center">
                        <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" @current-change="handlePageChange"></el-pagination>
                    </div>
                    <div class="flex align_center">
                        <el-button type="back" @click="back">返回</el-button>
                        <el-button  type="choose" @click="toSend">选择以上好友去群发</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>


<script>
import { mapState } from 'vuex'
import { toast } from '@/common/tools'
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            pageSize: 20,
            pageNum: 1,
            total: 0,
            list: [],
            isAll: false,
            isCurrentPage: false,
            allList: [],
            id: "",
            canAll: false,
        }
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
            weChatList: state=> state.weChatList,
        })
    },
    methods: {
        beforeClose(){
            this.$store.state.selectList = []
            this.$emit("beforeClose")
        },

        handlePageChange(val){
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.$post("/front/timing/friendList", {
                id: this.id,
                pageNum: 1,
                pageSize: 1000
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.beforeClose()
                }
            })
        },

        toSend(){
            if(this.$store.state.selectList.length===0) return toast(1, "请至少选择一个群发对象")
            this.$emit("recordCallback")
        },

        back(){
            this.$emit("back")
        },

        getList(id){
            this.id = id
            this.$post("/front/timing/friendList", {
                id: id,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                }
            })
        },

        getAllList(id){
            this.id = id
            this.$post("/front/timing/friendList", {
                id: id,
                pageNum: 1,
                pageSize: 10000
            }).then(res=>{
                if(res.data.code===0) {
                    this.allList = res.data.obj.list
                }
            })
        },

         // 全选当前页
         selectCurrentPage(){
            this.isCurrentPage = true
            for(let i=0; i<this.list.length; i++){
                if(!JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(this.list[i]))) {
                    this.$store.state.selectList.push(this.list[i])
                }
            }
        },

        // 移除选择好友
        removeFun(item){
            this.isAll = false
            this.isCurrentPage = false
            this.$store.state.selectList = this.$store.state.selectList.filter(o=>{
                return item.id != o.id
            })
            
        },

        // 取消全选当前页
        cancelCurrentPage(){
            this.isCurrentPage = false
            for(let i=0; i<this.list.length; i++){
                this.$store.state.selectList = this.$store.state.selectList.filter(o=>{
                    return this.list[i].id != o.id
                })
            }
        },

        // 判断当前页是否全选
        isCurrentPageFun(){
            for(let i=0; i<this.list.length; i++) {
                if(!JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(this.list[i]))) {
                    this.isCurrentPage = false
                    return 
                }
            }
            this.isCurrentPage = true
        },

        // 单个选择好友
        selectFun(item){
            this.$store.state.selectList.push(item)
            this.isCurrentPageFun()
        },

        selectAll(){
            if(!this.canAll) return toast(1, "正在加载所有好友，请稍后重试")
            this.isAll = true
            this.$store.state.selectList = this.allList
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 80vw;
    height: 90vh;
}
:deep(.el-dialog__header) {
    padding: 20px 0 15px 0;
}
:deep(.el-dialog__body) {
    padding: 0;
}
:deep(.el-button--choose) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--back) {
    background: #AAA;
    span {
        color: #fff !important;
    }
}
:deep(.el-tag--info) {
    margin: 0 3px 3px;
}
.dialogVue {
    width: 100%;
    height: 100%;
    padding: 0 15px 0;
    .listVue {
        width: 100%;
        height: calc(90vh - 59px);
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(90vh - 149px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #f5f5f5;
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .botVue {
            width: 100%;
            height: 50px;
        }
    }
}
</style>